<template>
    <div class="commonSearch">
        <a-form :model="model">
            <a-row>
                <a-col v-bind="colLayout" v-for="(item, index) in formItems" :key="index" v-show="item.showMore && item.type!== ''">
                    <a-form-item>
                      <template #label>
                        <span>{{item.label}}</span>
                        <a-tooltip placement="topLeft" :title="item.txt" arrow-point-at-center v-if="item.txt">
                          <QuestionCircleOutlined/>
                        </a-tooltip>
                      </template>
                        <div style="display: flex">
                          <a-input v-model:value="model[item.field]" v-if="item.type ==='input'"
                                   :disabled="item.disabled" />

                        </div>
                        <a-auto-complete
                            v-model:value="model[item.field]"
                            v-if="item.type==='autoComplete'"
                            :options="item.options"
                            :filter-option="filterOptions"
                        />
                        <a-select v-model:value="model[item.field]" v-if="item.type==='select' && item.multiple == true"
                                  :disabled="item.disabled" :show-search="item.search" :allowClear="item.notClear === undefined" mode="multiple"
                                   optionFilterProp="children" :filterOption="filterOption" showArrow>
                            <a-select-option :value="option.value" v-for="(option, index) in item.options" :key="index"
                                :disabled="item.disabled">
                                {{option.label}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model:value="model[item.field]" style="width: 100%"
                            v-if="item.type==='select' && item.multiple != true" :disabled="item.disabled"
                            :show-search="item.search" :allowClear="item.notClear === undefined" option-filter-prop="children"
                            :filterOption="filterOption" showArrow>
                            <a-select-option :value="option.value" v-for="(option, index) in item.options" :key="index"
                                :disabled="item.disabled">
                                {{option.label}}
                            </a-select-option>
                        </a-select>
                        <a-date-picker :placeholder="['开始时间', '结束时间']" v-model:value="model[item.field]" style="width: 100%" v-if="item.type==='datePicker'" :disabled="item.disabled"
                            allowClear valueFormat="YYYY-MM-DD" />
                        <a-range-picker v-model:value="model[item.field]" :placeholder="['开始时间', '结束时间']"
                            :showTime="{
                                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                                  }" style="width: 100%"
                            v-if="item.type==='rangePicker' && item.showTime != false" :disabled="item.disabled" valueFormat="YYYY-MM-DD HH:mm:ss"  />
                        <a-range-picker :placeholder="['开始时间', '结束时间']"
                            v-model:value="model[item.field]" style="width: 100%"
                            v-if="item.type==='rangePicker' && item.showTime == false" :disabled="item.disabled" valueFormat="YYYY-MM-DD" />
                      <a-range-picker :placeholder="['开始时间', '结束时间']"
                                      v-model:value="model[item.field]" style="width: 100%"
                                      v-if="item.type==='rangePicker' && item.showTime == false && item.picker === 'month'" picker="month" :disabled="item.disabled" valueFormat="YYYY-MM" />
                    </a-form-item>
                </a-col>
                <a-col v-bind="colLayout">
                    <a-form-item>
                        <a-button html-type="submit" type="primary" style="margin-right: 10px" @click="search">
                          <template #icon>
                            <SearchOutlined />
                          </template>
                          查询
                        </a-button>
                        <a-button type="primary" @click="reset">
                          <template #icon>
                            <ReloadOutlined />
                          </template>
                          重置
                        </a-button>
                        <slot name="button"/>
                        <a-button type="link" @click="onClick"  v-if="formItems.length > showItem && showExtraMore">
                            <span v-show="!showSearch">展开<DownOutlined /></span>
                            <span v-show="showSearch">收起<UpOutlined /></span>
                        </a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script lang="ts" setup>
    import moment from "dayjs"
    import { FormItem } from './commonSearch.type'
    import {onMounted, ref, watch} from "vue";
    const props = defineProps({
        rule:{
          type:Object,
          default:()=>{}
        },
        showItem:{
            type:Number,
            default:3
        },
        colLayout: {
            type: Object,
            default: () => ({
                xs: 24,
                sm: 12,
                md: 12,
                lg: 8,
                xl: 4,
                xxl: 4
            })
        },
        formItems: {
            type: Array as () => FormItem[],
            default: []
        },
        // showExtraMore：是否隐藏展开和收起
        showExtraMore: {
            type: Boolean,
            default: true
        }
    })

    const emit = defineEmits(['search', 'reset'])
    const model = defineModel()
    const form = ref()
    const showSearch = ref<Boolean> (false)

    watch(() => showSearch, (newValue: any) => {
        props.formItems.forEach((item: any, index: number) => {
            item.showMore = newValue.value ? true : index < props.showItem
        })
    }, { deep: true })

    // 点击展开收起
    const onClick = () => {
        showSearch.value = !showSearch.value
    }
    // 设置过滤
    const filterOption = (input: any, option: any) => {
        return option.children()[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
    const filterOptions = (input:string, option:any) => {
      return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
    };
    // 查询
    const search = async () => {
      console.log(model.value)
        emit('search')
    }

    const reset = () => {
        model.value = {}
        emit('reset')
    }

    onMounted(() => {
        props.formItems.forEach((item: any, index: number) => {
            if (!props.showExtraMore) {
                item.showMore = true
            } else {
                if (index < props.showItem) {
                    item.showMore = true
                }
            }
        })
    })
</script>
<script lang="ts">
export default {
  name:"commonSearch"
}
</script>

<style lang="less" scoped>
    :deep(.ant-form-item) {
        display: flex;
        padding-right: 10px;
        margin-top: 5px;
    }

    :deep(.ant-form-item-label) {
        display: inline-block;
        vertical-align: center;
        width: auto;
        margin-right: 5px;
    }

    :deep(.ant-form-row) {
        width: 100%;
    }

    :deep(.ant-form-item-control) {
        flex: 1 1;
    }

    :deep(.ant-form-item-control) {
        width: 70%;
    }
</style>
